<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-sky-100 to-indigo-100 p-6">
    <div class="mx-auto max-w-xl w-full p-8 rounded-2xl shadow-lg bg-white text-center">
      <h1 class="text-3xl font-semibold text-gray-900 mb-4">Tailwind v4 已启用 ✅</h1>
      <p class="text-gray-600">这是一个使用 Tailwind 工具类的测试页面（/tailwind-test）。</p>
      <div class="mt-6 grid grid-cols-2 gap-3">
        <button class="px-4 py-2 rounded-lg bg-sky-600 text-white hover:bg-sky-700">主按钮</button>
        <button class="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-100">次按钮</button>
      </div>
    </div>
  </div>
</template>

